<template>
    <div class="container">
        <div class="handle-box">
            <el-form ref="form" :model="form" label-width="90px" class="flex">
                <!-- <el-form-item label="街道名称：">
                        <el-input v-model="form.name" placeholder="请输入名称" class="handle-input mr10" @input="mohu()"></el-input>
                    </el-form-item> -->
                <el-form-item label="地区：" class="wid33">
                    <el-select v-model="searchForm.REGION_ID" placeholder="请选择地区" @change="changeStreet">
                        <el-option
                            v-for="item in clientNameOpts"
                            :key="item.REGION_ID"
                            :label="item.REGION_NAME"
                            :value="item.REGION_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="街道：" class="wid33">
                    <el-select v-model="searchForm.STREET_ID" placeholder="请选择街道" @change="changeCommunity" clearable>
                        <el-option
                            v-for="item in streetOpts"
                            :key="item.STREET_ID"
                            :label="item.STREET_NAME"
                            :value="item.STREET_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="社区：" class="wid33">
                    <el-select v-model="searchForm.COMMUNITY_ID" placeholder="请选择" @change="changePlot" clearable>
                        <el-option
                            v-for="item in communityOpts"
                            :key="item.COMMUNITY_ID"
                            :label="item.COMMUNITY_NAME"
                            :value="item.COMMUNITY_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小区：" class="wid33">
                    <el-select v-model="searchForm.VILLAGE_ID" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in plotOpts"
                            :key="item.VILLAGE_ID"
                            :label="item.VILLAGE_NAME"
                            :value="item.VILLAGE_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期：">
                    <el-date-picker v-model="dateRange" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="mohu()">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)">
            <el-table-column prop="点位名称" label="点位名称"></el-table-column>
            <el-table-column prop="所属小区" label="所属小区"></el-table-column>
            <el-table-column prop="所属社区" label="所属社区"></el-table-column>
            <el-table-column prop="所属街道" label="所属街道"></el-table-column>
            <el-table-column prop="所属行政区" label="所属行政区"></el-table-column>
            <el-table-column prop="混投次数" label="混投次数"></el-table-column>
            <el-table-column prop="乱扔次数" label="乱扔次数"></el-table-column>
            <el-table-column prop="总次数" label="总次数"></el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pagesize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
  data () {
    return {
      currentPage: 1, //初始页
      pagesize: 10,    //    每页的数据
      userList: [],
      address: '',
      name: '',
      dateRange: '',
      labelwidth: '170px',
      activeName: 1,
      ljtype: '',
      garbage: '',
      form: {
        name: '',
        value1: ''
      },
      searchForm: {
        REGION_ID: '',
        STREET_ID: '',
        COMMUNITY_ID: '',
        VILLAGE_ID: ''
      },
      clientNameOpts: [],
      streetOpts: [],
      tableData: [
      ],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      totalscore: '',
      rowbobject: '',
      garbage: '',
      communityOpts: [],
      plotOpts: [],

    }
  },
  async created () {
    const startTime = this.$moment().subtract(1, 'months').format('YYYY-MM-DD');
    const endTime = this.$moment().add(-1, 'day').format('YYYY-MM-DD');
    this.dateRange = endTime;
    await this.getClientNameOpts();
    this.changeCommunity()
    this.changePlot()
    this.getdata();
    // this.getljtype()
  },
  computed: {

  },
  methods: {
    // 获取行政区
    async getClientNameOpts () {
      const { data } = await this.$axios.get(`${this.$url}/GetRegionListApi`);
      this.clientNameOpts = data;
      if (localStorage.getItem('clentno')) {
        this.searchForm.REGION_ID = localStorage.getItem('clentno');
        this.changeStreet(this.searchForm.REGION_ID);
      } else {
        this.searchForm.REGION_ID = data[0].REGION_ID;
        this.changeStreet(this.searchForm.REGION_ID);
        if (localStorage.getItem('STREET_NO') && localStorage.getItem('STREET_NO') !== 'null') {
          this.searchForm.STREET_ID = localStorage.getItem('STREET_NO');
          this.changeCommunity(this.searchForm.STREET_ID);
        }
      }
    },
    // 获取街道
    async changeStreet (val) {
      this.searchForm.STREET_ID = ''
      this.searchForm.COMMUNITY_ID = ''
      this.searchForm.VILLAGE_ID = ''
      const { data } = await this.$axios.get(`${this.$url}/sreetListsApi?id=${val}`);
      this.streetOpts = data;
    },
    // 获取社区
    async changeCommunity (val) {
      this.searchForm.COMMUNITY_ID = ''
      this.searchForm.VILLAGE_ID = ''
      const { data } = await this.$axios.get(`${this.$url}/communityListsApi?id=${val}`);
      this.communityOpts = data;
    },
    // 获取小区
    async changePlot (val) {
      this.searchForm.VILLAGE_ID = ''
      const { data } = await this.$axios.get(`${this.$url}/villageListsApi?id=${val}`);
      this.plotOpts = data;
    },
    handleClick () {
      this.$axios({
        url: this.$surl + '/GetStreetGarbageCollectionDetailApi',
        method: 'get',
        params: {
          startTime: this.dateRange[0],
          endTime: this.dateRange[1],
          STREET_ID: this.rowbobject.STREET_ID,
          TYPE_ID: this.activeName
        }
      }).then(item => {
        console.log(item)
        this.garbage = Object.assign([], item.data)
      })
    },
    getljtype () {
      this.$axios({
        url: this.$url + '/GetRubbishTypeApi',
        method: 'get'
      }).then(item => {
        // console.log(this.TYPE_ID)
        this.ljtype = Object.assign([], item.data)
      })
    },
    getdata () {
      // let clientNo = '';
      // let level = '';
      // if (this.searchForm.STREET_ID) {
      //     level = '街道';
      //     clientNo = this.searchForm.STREET_ID;
      // } else if (this.searchForm.REGION_ID) {
      //     level = '行政区';
      //     clientNo = this.searchForm.REGION_ID;
      // }
      // const startTime = this.dateRange[0];
      // const endTime = this.dateRange[1];
      let that = this
      that.$axios({
        // url: this.$surl+'/GetStreetGarbageCollectionApi',
        url: this.$iurl+ '/getVideoHistoryInfoStatistics',
        method: 'get',
        // GetStreetGarbageCollectionDetailApi
        params: {
          ClientNo: this.searchForm.REGION_ID,
          StreetNo: this.searchForm.STREET_ID,
          date: this.dateRange
        }
      }).then(item => {
        this.tableData = Object.assign([], item.data)
        // var totalscore = item.data.Recyclable+item.data.Other+item.data.Kitchen+item.data.Harmful
        // // this.tableData.push(totalscore)
        // console.log(totalscore)
        // console.log(this.tableData)
        //    this.tableData.totalscore = isnumber(item.data.Recyclable)+isnumber(item.data.Other)+isnumber(item.data.Kitchen)+isnumber(item.data.Harmful)
      })
      if (this.searchForm.COMMUNITY_ID !== '') {
          var cName = this.communityOpts.filter(item => item.COMMUNITY_ID === this.searchForm.COMMUNITY_ID)[0].COMMUNITY_NAME
          this.tableData = this.tableData.filter(item => item.所属社区 === cName)
      }
      if (this.searchForm.VILLAGE_ID !== '') {
          var vName = this.plotOpts.filter(item => item.VILLAGE_ID === this.searchForm.VILLAGE_ID)[0].VILLAGE_NAME
          this.tableData = this.tableData.filter(item => item.所属小区 === vName)
      }
      
    },
    // 搜索
    search (form) {
      var startTime, endTime;
      startTime = new Date(form.value1[0]);
      endTime = new Date(form.value1[0])
      startTime = startTime.getFullYear() + '/' + (startTime.getMonth() + 1) + '/' + startTime.getDate() + ' '
      endTime = endTime.getFullYear() + '/' + (endTime.getMonth() + 1) + '/' + endTime.getDate() + ' '
      this.tableData.filter(item => {
        console.log(item.TIME.split('~')[0])
      })
      //             console.log(startTime
      // ,endTime)
      //    form.value1.forEach(item=>{
      //        var d =new Date(item)
      //        d=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
      //        console.log(d)
      //    })
      // var d = new Date('Thu May 12 2019 08:00:00 GMT+0800 (中国标准时间)'); 
      // d=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
    },
    mohu () {
      this.getdata();
      // console.log(this.form.name)
      // var search = this.name;
      // console.log(search)
      // var newdate = [];
      // if(search){
      //     if(search)
      //      this.tableData.filter(item=>{
      //         if(item.name.indexOf(search) != -1){
      //             newdate.push(item)
      //         }
      //     })
      // }else if (search == ''){
      //     console.log(this.tableData)
      // }
      // this.tableData = newdate
    },

    // 编辑操作
    handleEdit (index, row) {
      this.rowbobject = Object.assign([], row)
      this.form = row;
      this.editVisible = true;
      this.handleClick()
    },
    // 保存编辑
    saveEdit () {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pagesize = size;
      console.log(this.pagesize)
    }
  }
}
</script>
<style scoped>
</style>